<template>
  <LoadPage :show="showPage"/>
    <view>
        <ProductList list-type="2" bg-color="#f5c245" :data="dataList" v-if="dataList.length"/>
      <LoadMore :status="status"/>
    </view>
</template>

<script setup>
import ProductList from '@/components/productList/productList.vue'
import {ref, reactive} from 'vue';
import {collectList} from '@/api/apiList';
import {deleteObjectEmptyKey} from '@/utils/util'
import {onReachBottom, onPullDownRefresh, onLoad} from "@dcloudio/uni-app";

const dataList = ref([])
const queryData = reactive({
  sortName: 'create_time',
  sortValue: 'desc',
  search: '',
  categoryId: '',
  pageSize: 10,
  pageNum: 1,
  type: 0
})
const status = ref('loadmore')
const showPage = ref(true)
const getListData = async () => {
  return new Promise(async (resolve, reject) => {
    status.value = 'loading'
    const newQuery = deleteObjectEmptyKey(queryData)
    const res = await collectList(newQuery)
    if (res.code == 200) {
      if (res.rows.length) {
        dataList.value = [...dataList.value, ...res.rows]
        status.value = 'loadmore'
        resolve('ok')
      } else {
        status.value = 'nomore'
        resolve('ok')
      }
      showPage.value = false

    }
  })
}

onReachBottom(() => {
  queryData.pageNum++
  getListData()
})

onPullDownRefresh(() => {
  uni.showLoading({
    title: '加载中'
  })
  queryData.categoryId = ''
  queryData.pageNum = 1
  dataList.value = []
  getListData()
  uni.hideLoading()
  uni.stopPullDownRefresh()
})

onLoad(() => {
  getListData()
})
</script>